<template>
    <div class='player-container'>
        <div class="player-container-list">
            <div class="player-container-list-item" v-for="item in matchUser(2)" :key="item.id">
                <div class="player-container-list-item-avr">
                    <img v-if="item.avr" :src="item.avr" alt="">
                    <img v-if="!item.avr" src="@/assets/avr.jpg" alt="">
                    <div v-if="isOnline(item.activeTime)" class="player-container-list-item-avr-online"></div>
                    <div v-if="!isOnline(item.activeTime)" class="player-container-list-item-avr-offline"></div>
                </div>
                <div class="player-container-list-item-name">{{ item.nickName }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import userApi from '@/plugins/api/user'
import { fuzzyMatch } from '@/plugins/utils/filterArray'
import { isOver5Minutes } from "@/plugins/utils/timeUtils";
export default {
    data() {
        return {
            users: []
        }
    },
    mounted() {
        this.getUser()
    },
    methods: {
        async getUser() {
            const res = await userApi.all()
            if (res.code === 200) {
                this.users = res.data
            }
        },
        matchUser(role) {
            return fuzzyMatch(this.users, { role })
        },

        isOnline(timestamp) {
            if (timestamp && !isOver5Minutes(timestamp)) {
                return true
            }
            return false
        }
    }
}
</script>

<style lang='scss' scoped>
@import '../assets/global/mixin.scss';

.player-container {
    width: 100%;
    height: 100%;
    background-color: #fff;

    &-list {
        padding: 10px 20px;

        &-item {
            // width: 100%;
            padding: 10px 10px;
            @include flex(row, flex-start, center);

            &-name {
                font-size: 16px;
                margin-left: 20px;
                // font-weight: 600;
            }

            &-avr {
                flex: 0 0 42px;
                height: 42px;
                position: relative;
                z-index: 0;

                img {
                    width: 100%;
                    border-radius: 42px;
                }

                &-online,
                &-offline {
                    width: 6px;
                    height: 6px;
                    bottom: 0;
                    right: 0;
                    border-radius: 6px;
                    background-color: #22C55E;
                    position: absolute;
                    z-index: 9;
                    border: 2px solid #fff;
                }

                &-offline {
                    background-color: #999;
                }
            }
        }
    }
}</style>